<template>
  <my-container>
    <template #header>
      <el-form class="ad-form-query" :inline="true" :model="filter" @submit.native.prevent>
        <el-form-item>
          <el-input v-model="filter.userName" placeholder="操作账号" clearable @keyup.enter.native="onSearch">
            <template #prefix>
              <i class="el-input__icon el-icon-search" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </template>

    <el-table v-loading="listLoading" :data="list" highlight-current-row height="'100%'"
      style="width: 100%;height:100%;">
      <el-table-column prop="applicationName" label="应用模块"></el-table-column>
      <el-table-column prop="userName" label="操作人"></el-table-column>
      <el-table-column prop="tenantName" label="代理商" />
      <el-table-column prop="url" label="操作接口" />
      <el-table-column prop="clientIpAddress" label="IP地址" />
      <el-table-column prop="browserInfo" label="浏览器" />
      <el-table-column prop="status" label="操作状态">
        <template #default="{row}">
          <el-tag :type="row.status=='成功' ? 'success' : 'danger'" disable-transitions>{{ row.status=='成功' ? '成功' : '失败'
          }}</el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="exceptions" label="错误信息" :height="50" /> -->
      <el-table-column prop="executionDuration" label="耗时(毫秒)" />
      <el-table-column prop="executionTime" label="操作时间" :formatter="formatCreatedTime" width />
    </el-table>

    <template #footer>
      <my-pagination ref="pager" :total="total" @get-page="getList" />
    </template>
  </my-container>
</template>

<script>
import { formatTime } from '@/utils'
import { getOprationLogPage } from '@/api/admin/opration-log'
import MyContainer from '@/components/my-container'

export default {
  name: 'OprationLog',
  components: { MyContainer },
  data() {
    return {
      filter: {
        userName: ''
      },
      list: [],
      total: 0,
      listLoading: false
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    formatCreatedTime: function(row, column, time) {
      return formatTime(time, 'YYYY-MM-DD HH:mm')
    },
    onSearch() {
      this.$refs.pager.setPage(1)
      this.getList()
    },
    // 获取列表
    async getList() {
      const pager = this.$refs.pager.getPager()
      const para = {
        ...pager,
        filter: this.filter
      }
      this.listLoading = true
      const res = await getOprationLogPage(para)
      this.listLoading = false

      if (!res?.success) {
        return
      }

      this.total = res.data.total
      this.list = res.data.list
    }
  }
}
</script>
